<template>
  <div class="bgImg">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-container"
    >
      <h3 class="title">管理员登录</h3>
      <el-form-item prop="loginName">
        <el-input
          type="text"
          auto-complete="off"
          placeholder="账号"
          v-model="ruleForm.loginName"
          id="inpUser"
          @change="checkusername"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          auto-complete="off"
          placeholder="密码"
          v-model="ruleForm.password"
          show-password
          id="passwordUser"
          @change="checkusername"
          @keyup.enter.native="login('ruleForm')"
        ></el-input>
      </el-form-item>
      <el-checkbox class="remember" v-model="remember" @change="savePwd">记住密码</el-checkbox>
      <el-form-item style="width:100%">
        <el-button type="primary" style="width:100%;" @click="login('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Notification } from "element-ui";

export default {
  name: "Login",
  data() {
    return {
      remember: false,
      ruleForm: {
        loginName: "",
        password: ""
      },
      rules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 25, message: "长度在 4 到 19 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  created() {},
  methods: {
    login(formName) {
      const _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          _this.axios
            .post(
              "/user/login",
              `username=${this.ruleForm.loginName}&password=${this.ruleForm.password}`
            )
            .then(res => {
              if (res.data.ok === 1) {
                if (res.data.data[0].username != undefined) {
                  var username = res.data.data[0].username;
                  var position = res.data.data[0].position;
                  localStorage.setItem("username", username);
                  localStorage.setItem("position", position);
                  localStorage.setItem(
                    "user",
                    JSON.stringify(res.data.data[0])
                  );
                } else {
                  var name = res.data.data[0].name;
                  var position = res.data.data[0].position;
                  localStorage.setItem("username", name);
                  localStorage.setItem("position", position);
                  localStorage.setItem(
                    "user",
                    JSON.stringify(res.data.data[0])
                  );
                }
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "success"
                });
                _this.$router.push("/main");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "error"
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    savePwd() {
      var checkboxStatus = this.remember;
      var inpUser = document.getElementById("inpUser").value;
      var passwordUser = document.getElementById("passwordUser").value;
      if (checkboxStatus == true) {
        sessionStorage.setItem(inpUser, passwordUser);
      } else {
        sessionStorage.removeItem(inpUser);
      }
    },
    checkusername() {
      var inpUser = document.getElementById("inpUser").value;
      var passwordUser = document.getElementById("passwordUser").value;
      var sessionipUser = sessionStorage.getItem(inpUser);
      if ("" != sessionipUser && sessionipUser != null) {
        this.ruleForm.password = sessionipUser;
      }
    }
  }
};
</script>

<style scoped>
.bgImg {
  height: 100%;
  background: url("../../assets/1.jpg") no-repeat;
  background-size: 100% 100%;
}
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  /* margin: 180px auto; */
  margin: 0 auto;
  position: relative;
  top: 180px;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login-container .title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login-container .remember {
  margin: 0px 0px 35px 0px;
}
</style>
